<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟2</title>
<style type="text/css">
    #clock{
        width: 500px;
        height: 500px;
        margin: 100px auto 0;  
    }
    #cvs{
        border: 1px solid chocolate;
    }
</style>
</head>
<body>
    <div id="clock">
        <canvas id="cvs" width="500" height="500"></canvas>
    </div>
    
</body>
<script type="text/javascript">
    var cvs = document.getElementById("cvs")
    var ctx = cvs.getContext('2d')
    
    function click(){
        //时钟圆盘
        ctx.beginPath()
        ctx.strokeStyle ='red'
        ctx.lineWidth = 8
        ctx.arc(250,250,200,0,2*Math.PI,true)
        ctx.closePath()
        ctx.stroke()
        
        ctx.globalCompositeOperation='destination-over'
        //时刻度
        for(var i=0;i<12;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(250,250);
            ctx.rotate(i*30*Math.PI/180);
            ctx.strokeStyle ='#00D6B2';
            ctx.lineWidth=6;
            ctx.moveTo(0,-175);
            ctx.lineTo(0,-200);
            
            ctx.stroke()
            ctx.closePath();
            ctx.restore()
        };
        //分刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.beginPath();
            ctx.translate(250,250);
            ctx.rotate(i*6*Math.PI/180);
            ctx.strokeStyle ='#FEF319';
            ctx.lineWidth=4;
            ctx.moveTo(0,-185);
            ctx.lineTo(0,-200);
            ctx.stroke()
            ctx.closePath();
            ctx.restore()
        };
        // //画小时数
        var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        
        // hour.forEach(function(num,i){
        //     var rad = 2 * Math.PI / 12 * i;
        //     var x = Math.cos(rad) * 160;
        //     var y = Math.sin(rad) * 160;
        //   //  console.log(x,y)
        //     ctx.font = "18px sans-serif"
        //     ctx.textAlign = "center";
        //     ctx.textBaseline = "middle";
        //     ctx.fillStyle='#FF0000';
        //     ctx.fill();
        //     ctx.fillText(num, x+250, y+250);
        // });
		//画数字时间
		hour.forEach(function(num,i){
			var rad = 2 * Math.PI / 12 * i
			var x = Math.cos(rad) * 165
			var y = Math.sin(rad) * 165
			ctx.font = "18px sans-serif"
			ctx.textAlign = "center"
			ctx.textBaseline = "middle"
			ctx.fillStyle='red'
			ctx.fill()
			ctx.fillText(num, x+250, y+250)
		});
        //获取当前时间
        var oDate = new Date
        var hour = oDate.getHours()
        var minutes = oDate.getMinutes()
        var seconds = oDate.getSeconds()
    
//        console.log(hour,minutes,seconds)
        if(hour>12){
            hour = hour-12+minutes/60;
        }
        minutes = minutes + seconds/60;
        //console.log(hour,minutes,seconds)
        
        //时针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(hour*30*Math.PI/180);
        ctx.strokeStyle ='#F44336';
        ctx.lineWidth=9;
        ctx.moveTo(0,15);
        ctx.lineTo(0,-90);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
//        
        //分针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(minutes*6*Math.PI/180);
        ctx.strokeStyle ='#A2D866';
        ctx.lineWidth=6;
        ctx.moveTo(0,20);
        ctx.lineTo(0,-130);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
        //秒针
        ctx.save();
        ctx.beginPath();
        ctx.translate(250,250);
        ctx.rotate(seconds*6*Math.PI/180);
        ctx.strokeStyle ='#F0AD4E';
        ctx.lineWidth=3;
        ctx.moveTo(0,25);
        ctx.lineTo(0,-150);
        ctx.stroke()
        ctx.closePath();
        ctx.restore()
        
        
        ctx.globalCompositeOperation='source-over'
        //中心圆
        ctx.beginPath()
        ctx.fillStyle='#60D9F8';
        ctx.strokeStyle='#00B7FF';
        ctx.lineWidth = 3;
        ctx.arc(250,250,8,0,2*Math.PI,true);
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
        
        
        //画时间
        var h2=oDate.getHours();
        var m2=oDate.getMinutes();
        var str1=h2>9?h2:('0'+h2);
        var str2=m2>9?m2:('0'+m2);
        ctx.beginPath();
        ctx.fillStyle='#FB1F11';
        ctx.font='26px 微软雅黑';
        ctx.fillText(str1+':'+str2,250,340);
        ctx.closePath();
        
    }    
    setInterval(function(){
        ctx.clearRect(0,0,cvs.width,cvs.height)
        click()
    },1000)
</script>
</html>